<template>
    <view class="tabbar">
        <view 
            v-for="(item, index) in tabList" 
            :key="index" 
            class="tabbar-item" 
            :class="{ active: currentTab === index }"
            @tap="switchTab(index, item.pagePath)"
        >
            <image 
                :src="currentTab === index ? item.selectedIconPath : item.iconPath" 
                class="tabbar-icon"
            ></image>
            <text class="tabbar-text">{{ item.text }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 当前选中的标签页
const currentTab = ref(0);

// 标签页配置
const tabList = ref([
    {
        pagePath: '/pages/index/index',
        iconPath: '/static/images/tabbar/home.png',
        selectedIconPath: '/static/images/tabbar/home-active.png',
        text: '首页'
    },
    {
        pagePath: '/pages/calendar/index',
        iconPath: '/static/images/tabbar/calendar.png',
        selectedIconPath: '/static/images/tabbar/calendar-active.png',
        text: '日历'
    },
    {
        pagePath: '/pages/knowledge/index',
        iconPath: '/static/images/tabbar/knowledge.png',
        selectedIconPath: '/static/images/tabbar/knowledge-active.png',
        text: '知识'
    },
    {
        pagePath: '/pages/my/index',
        iconPath: '/static/images/tabbar/my.png',
        selectedIconPath: '/static/images/tabbar/my-active.png',
        text: '我的'
    }
]);

// 切换标签页
const switchTab = (index: number, url: string) => {
    if (currentTab.value === index) return;
    
    currentTab.value = index;
    uni.switchTab({
        url
    });
};

// 获取当前页面路径，设置对应的标签为激活状态
const getCurrentPage = () => {
    const pages = getCurrentPages();
    if (pages.length === 0) return;
    
    const currentPage = pages[pages.length - 1];
    const currentPath = `/${currentPage.route}`;
    
    const index = tabList.value.findIndex(item => item.pagePath === currentPath);
    if (index !== -1) {
        currentTab.value = index;
    }
};

// 生命周期钩子
onMounted(() => {
    getCurrentPage();
});
</script>

<style lang="scss" scoped>
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 100;
}

.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10rpx 0;
}

.tabbar-icon {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 6rpx;
}

.tabbar-text {
    font-size: 24rpx;
    color: #999999;
}

.tabbar-item.active .tabbar-text {
    color: var(--color-primary, #ff9fb5);
}
</style> 